<app-header>
  @let organization = organization$ | async;
  @if (isBreadcrumbingEnabled$ | async) {
    <button
      bitBadge
      class="!tw-align-middle"
      (click)="changePlan(organization)"
      slot="title-suffix"
      type="button"
      variant="primary"
    >
      {{ "upgrade" | i18n }}
    </button>
  }
</app-header>

<bit-container>
  @if (loading) {
    <i
      class="bwi bwi-spinner bwi-spin tw-text-muted"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
  }
  @if (!loading) {
    <bit-table>
      <ng-template body>
        @for (p of policies; track p.name) {
          @if (p.display(organization, configService) | async) {
            <tr bitRow>
              <td bitCell ngPreserveWhitespaces>
                <button type="button" bitLink (click)="edit(p)">{{ p.name | i18n }}</button>
                @if (policiesEnabledMap.get(p.type)) {
                  <span bitBadge variant="success">{{ "on" | i18n }}</span>
                }
                <small class="tw-text-muted tw-block">{{ p.description | i18n }}</small>
              </td>
            </tr>
          }
        }
      </ng-template>
    </bit-table>
  }
</bit-container>
